// --------------------------------

// Tutorial - https://codyhouse.co/tutorials/how-stacking-cards

// --------------------------------

.stack-cards {
  --stack-cards-gap: var(--space-sm); // cards gap on scrolling
}

.stack-cards__item {
  position: relative; // fallback for browsers not supporting sticky position
  position: sticky;
  top: var(--space-md); // cards top position when they get fixed
  height: 0;
  padding-bottom: 50%; // 18:9 aspect ratio
  transform-origin: center top;
  overflow: hidden;

  > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}
